<template>
  <div class="registry">
    <header>
     <van-nav-bar
       title="注册"
       left-arrow
       @click-left="onClickLeft"
     />
    </header>
    <div>
  <main>
  <form action="">
    <input type="text" placeholder="请输入手机号码" class="tel" v-model="yzm.user_phone">
    <input type="password" placeholder="请设置密码" class="pass" v-model="yzm.password">
    <input type="text" placeholder="请输入验证码" class="yzm" v-model="yzm.phone_code">
    <span @click="getYzm" :class="{alreadyget:colorchange}">获取验证码</span>
    <br>
    <em class="sub" @click="goToLogin">下一步</em>
    <!-- <input type="submit" value="下一步" > -->
  </form>
  </main>
</div>
    <p @click="goToLog">已有帐号</p>
  </div>
</template>

<script>
import {getCodeApi,successRegistry} from "../utils/api.js";
import {useRouter} from "vue-router";
import { reactive,ref } from "vue";
import {Toast } from "vant";
export default {
  setup() {
    const router=useRouter();
    const onClickLeft = () =>{
      router.go(-1);
    };
    const goToLog=()=>{
      router.push("/login");
    }
     const yzm=reactive({
     user_phone:'',
     password:'',
     phone_code:'',
   })

   const colorchange=ref('');
   const getYzm=async ()=>{    
     if(yzm.user_phone&&yzm.password){
       const data=await getCodeApi(yzm);
       if(data.status===0){
         colorchange.value=true;
       }else{
         colorchange.value=false;
       }
     }
   }
   const goToLogin= async ()=>{
     console.log(yzm);
     const successReg=await successRegistry(yzm);
     if(successReg.status===0){
       Toast.success('注册成功！');
       router.push("/login");
     }
   }
    return {
      onClickLeft,goToLog,yzm,getYzm,goToLogin,colorchange
    };
  },
};
</script>
<style lang="scss" scoped>
.alreadyget{
  background: rgb(226, 226, 226)!important;
  color:black !important;
}
p{
  color:#ccc;
  font-size:16px;
  line-height:45px;
  width:90%;
  margin:0 auto;
  text-align:left;
}
main{
  padding:20px;
  background: #fff;
  height:50%;
  width:90%;
  border-radius:10px;
  margin:100px auto 0;
  position:relative;
  input{
    outline:none;
    border:0;
    width:100%;
    height:50px;
    border-bottom:solid #ccc 1px;
    font-size:16px;
    text-indent:30px;
  }
  .tel{
      background: url("../assets/img/手机@2x.png") no-repeat 0px 10px;
      background-size:20px 30px ;
  }
  .pass{
      background: url("../assets/img/验证码@2x.png") no-repeat 0px 10px;
      background-size:20px 30px ;
  }
  .yzm{
      background: url("../assets/img/验证码@2x.png") no-repeat 0px 10px;
      background-size:20px 30px ;
  }
  span{
    display:inline-block;
    font-size:16px;
    line-height:36px;
    text-align: center;
    position:absolute;
    top:127px;
    right:30px;
    height:36px;
    width:100px;
    border-radius:18px;
    background:rgb(28, 187, 174);
    outline:none;
    border:0;
    color:#fff;
  }
  .sub{
    display:inline-block;
    text-align:center;
    line-height:45px;
    width:80%;
    margin:20px 10%;
    height:45px;
    border-radius:25px;
    background:rgb(28, 187, 174);
    color:#fff;
    font-size:20px;
    text-indent:0;
  }
}

</style>
